import React from 'react'
import tow from '../../img/2.png'
import three from '../../img/3.png'
import four from '../../img/4.png'
import tu1 from '../../img/tu1.png'
import tu2 from '../../img/tu2.png'

function Index() {

    return (
        <div>
            <div>
                <p className='text-[14px] font-black'>舆情分析</p>
                <div className='flex items-center justify-between'>
                    <div className='w-[180px] h-[100px] bg-sky-100 flex items-center justify-between'>
                        <div>
                            <p className='text-[14px]'>访问总人数</p>
                            <p className='text-[24px]'>12,256</p>
                            <p>较昨天 <span className='text-red-500'>206</span></p>
                        </div>
                        <img src={tow} style={{ width: '100px', height: '100px' }} />
                    </div>
                    <div className='w-[180px] h-[100px] bg-emerald-100 flex items-center justify-between'>
                        <div>
                            <p className='text-[14px]'>内容发布量</p>
                            <p className='text-[24px]'>11,38</p>
                            <p>较昨天 <span className='text-red-500'>405</span></p>
                        </div>
                        <img src={three} style={{ width: '100px', height: '100px' }} />
                    </div>
                    <div className='w-[180px] h-[100px] bg-sky-100 flex items-center justify-between'>
                        <div>
                            <p className='text-[14px]'>评论总量</p>
                            <p className='text-[24px]'>4,592</p>
                            <p>较昨天 <span className='text-red-500'>112</span></p>
                        </div>
                        <img src={tow} style={{ width: '100px', height: '100px' }} />
                    </div>
                    <div className='w-[180px] h-[100px] bg-indigo-200 flex items-center justify-between'>
                        <div>
                            <p className='text-[14px]'>分享总量</p>
                            <p className='text-[24px]'>3,256</p>
                            <p>较昨天 <span className='text-red-500'>588</span></p>
                        </div>
                        <img src={four} style={{ width: '100px', height: '100px' }} />
                    </div>
                </div>
                <div className='flex items-center'>
                    <div>
                        <p className='text-[14px] font-black flex items-center justify-between m-[10px]'><span>内容发布</span> <span className='text-cyan-300'>查看更多</span> </p>
                        <img src={tu1} alt="" />
                    </div>
                    <div className=' items-center  justify-between'>
                        <p className='text-[14px] font-black'>热门作者榜单 <span className='text-cyan-300'>查看更多</span> </p>
                        <p className='text-[14px] font-black'>
                            <span>排名</span>
                            <span>作者</span>
                            <span>内容量</span>
                            <span>点击量</span>
                        </p>
                        <p>
                            <span>1</span>
                            <span>尽快改变了</span>
                            <span>1,500</span>
                            <span>32,234</span>
                        </p>
                        <p>
                            <span>2</span>
                            <span>王多鱼</span>
                            <span>2,100</span>
                            <span>22,234</span>
                        </p>
                        <p>
                            <span>3</span>
                            <span>拉客了</span>
                            <span>1,800</span>
                            <span>23,234</span>
                        </p>
                        <p>
                            <span>4</span>
                            <span>冷恶风</span>
                            <span>1,800</span>
                            <span>23,234</span>
                        </p>
                        <p>
                            <span>5</span>
                            <span>额哥哥</span>
                            <span>1,800</span>
                            <span>23,234</span>
                        </p>
                        <p>
                            <span>6</span>
                            <span>额我哥哥b</span>
                            <span>1,800</span>
                            <span>23,234</span>
                        </p>
                        <p>
                            <span>7</span>
                            <span>dgegeg</span>
                            <span>1,800</span>
                            <span>23,234</span>
                        </p>
                    </div>
                </div>
                <div>
                    <p className='text-[14px] font-black flex items-center justify-between m-[10px]'><span>内容时段分</span> <span className='text-cyan-300'>查看更多</span> </p>
                    <img src={tu2} alt="" />
                </div>
            </div>
        </div>
    )
}

export default Index
